<template>
    <div class="list">
        <!-- 轮播图 -->
        <swiper indicator-dots='true' indicator-color='rgba(30,74,255,.6)' indicator-active-color="pink" autoplay='true' interval="1000" circular='true'>
            <swiper-item v-for="item in imgUrl" :key="item.id">
                <img :src="item.img" alt="" class="tabImg">
            </swiper-item>
        </swiper>
        <!-- 列表组件 -->
        <ListTemplate v-for="(item,index) in list_tmp" :key="index" :item='item' :index="index"></ListTemplate>
    </div>
</template>
<script>
import ListTemplate from "../list-template/template.vue";
import {mapState} from "vuex";
export default {
    data(){
        return {
            imgUrl:[
                    {
                        'img':'../../assets/images/pig.jpg',
                        
                    },
                    {
                        'img':'../../assets/images/pig.jpg',
                        id:2
                    },
                    {
                        'img':'../../assets/images/pig.jpg',
                        id:3
                    },
                    {
                        'img':'../../assets/images/pig.jpg',
                        id:4
                    }
                ]
            }
    },
    components:{ListTemplate},
    methods:{
    },
    created(){
        //调用这个方法使state中取到值
        this.$store.dispatch('getData');
    },
    computed:{
        //import {mapState} from "vuex" 然后使用下面的方法取值
        ...mapState(['list_tmp'])
    }
}
</script>
<style scoped>
    .tabImg {
        width: 100%;
        height: 390rpx;
    }
</style>



